<template>
  <div class="addGood">
    <h1>商品管理 -- {{ upTitle }}</h1>
    <div class="form">
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="商品名称" width="200px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="form.subtitle" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="form.categoryId" placeholder="请选择">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in kindData"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input placeholder="请输入内容" v-model="form.price" type="number">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input placeholder="请输入内容" v-model="form.stock" type="number">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品详情">
          <!-- <el-input type="textarea" v-model="form.detail"></el-input> -->
          <quill-editor
            v-model="form.detail"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          >
          <div v-html="str" class="ql-editor">
              {{str}}
          </div>
          </quill-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { saveGood, kind } from "../api/index";

import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      upTitle: "添加商品",
      form: {
        categoryId: "",
        name: "",
        subtitle: "",
        subImages: "",
        detail: "",
        price: "",
        stock: "",
        status: 1,
      },
      kindData: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      str:"",
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], //列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], //字体
            [{ align: [] }], //对齐方式
            ["clean"], //清除字体样式
            ["image", "video"], //上传图片、上传视频
          ],
        },
      },
    };
  },
  created() {
    if (this.$route.query.name) {
      this.upTitle = "修改商品";
      this.form = this.$route.query;
    } else {
      this.upTitle = "添加商品";
    }
    this.init();
    this.str =  this.$route.query.detail
  },
  methods: {
    onEditorReady(editor) { // 准备编辑器

    },
    onEditorBlur(){}, // 失去焦点事件
    onEditorFocus(){}, // 获得焦点事件
    onEditorChange(){}, // 内容改变事件
    // 转码
    escapeStringHTML(str) {
        str = str.replace(/&lt;/g,'<');
        str = str.replace(/&gt;/g,'>');
        return str;
    },
    init() {
      kind({ categoryId: this.categoryId }).then((res) => {
        console.log(res);
        this.kindData = res.data;
      });
    },
    onSubmit() {
      saveGood(this.form).then((res) => {
        console.log(res);
        if (res.data.status == 0) {
          this.$router.push("/good");
          this.$message.success(res.data);
        } else {
          this.$message.error(res.data);
        }
      });
      this.form = 0;
      console.log(this.form);
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style scoped lang="scss">
.form {
  margin-top: 20px;
}
.ql-editor{
  background-color: #fff;
}
</style>